'use client'

import Link from 'next/link'
import { useState } from 'react'
import SearchDialog from '@/components/SearchDialog'

export default function NotFound() {
  const [isSearchOpen, setIsSearchOpen] = useState(false)

  return (
    <>
      {isSearchOpen && <SearchDialog onClose={() => setIsSearchOpen(false)} />}
      <main className="min-h-screen flex items-center justify-center p-4 md:p-8">
        <div className="max-w-2xl mx-auto text-center">
          {/* 404 动画文字 */}
          <h1 className="text-9xl font-bold text-blue-600 dark:text-blue-500 animate-pulse">
            404
          </h1>
          
          {/* 标题 */}
          <h2 className="mt-8 text-3xl font-bold text-gray-900 dark:text-white">
            页面未找到
          </h2>
          
          {/* 描述 */}
          <p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
            抱歉，您访问的页面可能已被移动、删除或不存在。
          </p>
          
          {/* 建议链接 */}
          <div className="mt-8 space-y-4">
            <p className="text-gray-600 dark:text-gray-300">
              您可以尝试以下操作：
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link 
                href="/"
                className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
              >
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                返回首页
              </Link>
              <Link 
                href="/archives"
                className="inline-flex items-center px-6 py-3 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
              >
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                浏览归档
              </Link>
            </div>
          </div>
          
          {/* 搜索提示 */}
          <div className="mt-12 p-6 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              找不到想要的内容？
            </h3>
            <p className="text-gray-600 dark:text-gray-300 mb-4">
              您可以使用搜索功能查找相关文章
            </p>
            <button
              onClick={() => setIsSearchOpen(true)}
              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
            >
              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
              搜索文章
            </button>
          </div>
          
          {/* 随机有趣的提示 */}
          <div className="mt-12 text-gray-500 dark:text-gray-400 italic">
            {[
              "可能这个页面去度假了...",
              "这个页面可能在玩捉迷藏...",
              "糟糕，页面走丢了...",
              "这里什么都没有，真是尴尬...",
              "这个页面可能穿越到了平行宇宙..."
            ][Math.floor(Math.random() * 5)]}
          </div>
        </div>
      </main>
    </>
  )
} 